<template>
	<view :class="isDark?'darkBg':''">
		<cu-custom :bgColor="isDark?'bg-black':'bg-grey'" isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">单科排行</block>
		</cu-custom>
		<view :class="isDark?'dark':''">
			<view style="padding-top: 0rpx;">
				<view style="height: 545rpx; background-size: cover;  background-position: center;"
					:style="{backgroundImage:isDark?'url(https://web.cloudduolc.cn/image/adblack7.png)':'url(https://web.cloudduolc.cn/image/adwhite5.png)'}">
					<ad unit-id="adunit-a121169b4b7f723c" ad-type="video" :ad-theme="isDark?'black':'white'"></ad>
				</view>
				<view class="cu-bar  " style="font-weight:bold" :class="isDark?'dark':'bg-white'">
					<view class="action">
						<text class="cuIcon-titles text-grey"></text>单科排行
						<text class="cuIcon-search"></text>


					</view>
				</view>
				<view :class="isDark?'dark':'bg-white'" class="solid-bottom padding-bottom">
					<text class="cuIcon-titles  margin-top-xl margin-left-xl ">以下数据仅供参考，实时更新（为最近一学期数据）</text>
				</view>

				<view class="margin-bottom-xl text-center text-grey  shadow-warp cu-list menu card-menu margin-top-xl"
					style="font-weight:bold" :class="isDark?'darkIn':'bg-white'">

					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :range="array" mode="multiSelector">
							<view class="solid-bottom text-ml padding">

								<view class="  text-black text-center" :class="isDark?'darkIn':'bg-white'"
									style="border-radius: 25rpx;padding: 17rpx;" v-if="array.length>0">
									{{array[0][collegeIndex]}}-{{array[1][majorIndex]}}-{{array[2][classNameIndex]}}-{{array[3][courseNameIndex]}}<text
										class="cuIcon-search"></text>
								</view>

							</view>

						</picker>
					</view>

					<view class="padding text-center radius" :class="isDark?'darkIn':'bg-white'">
						<view style="display: flex;">
							<span style="width:110rpx;font-weight:bold">排名</span>
							<span style="width: 450rpx;overflow: hidden;word-break: break-all; text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; 
				 -webkit-line-clamp:1;font-weight:bold">学号</span>
							<span
								style="float: right;margin-right: 50rpx;margin-top: 0rpx; width: 100rpx;font-weight:bold">
								绩点
							</span>
							<span
								style="float: right;margin-right: 50rpx;margin-top: 0rpx; width: 150rpx;font-weight:bold">
								分数
							</span>
						</view>
					</view>



					<view v-if="list.length==0" style="text-align: center;font-size: 40rpx;"
						class="margin-left margin-right" :class="isDark?'darkIn':'bg-white'">


						<image src="../../../static/score/empty.png"
							style="width: 600rpx;height: 600rpx;margin-top: 0rpx;">
						</image>
					</view>


					<view v-if="list.length>0" :class="isDark?'darkIn':'bg-white'">
						<view
							style="display: flex;font-size: 30rpx;background-color:#b4b4b4;color:#333333;border-radius:20rpx;padding: 10rpx;margin-top: 30rpx;">
							<span style="width:170rpx;font-weight:bold">{{bottom.id}}</span>
							<span style="width: 430rpx;overflow: hidden;word-break: break-all; text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; 
						 	 -webkit-line-clamp:1;font-weight:bold">{{bottom.username}}</span>
							<span
								style="float: right;margin-right:40rpx;margin-top: 0rpx; width: 100rpx;font-weight:bold">
								{{bottom.gradePoint}}
							</span>
							<span
								style="float: right;margin-right:40rpx;margin-top: 0rpx; width: 150rpx;font-weight:bold">
								{{bottom.score}}
							</span>
						</view>
					</view>

					<view class="padding text-center" v-for="(val,index) in list" :key="index"
						:class="isDark?'darkIn':'bg-white'">
						<view style="display: flex;">

							<span style="width:110rpx;font-weight:bold">{{index+1}}</span>
							<span style="width: 450rpx;overflow: hidden;word-break: break-all; text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical; 
						 -webkit-line-clamp:1;font-weight:bold">{{val.username}}</span>
							<span
								style="float: right;margin-right: 50rpx;margin-top: 0rpx; width: 100rpx;font-weight:bold">
								{{val.gradePoint}}
							</span>
							<span
								style="float: right;margin-right: 50rpx;margin-top: 0rpx; width: 150rpx;font-weight:bold">
								{{val.score}}
							</span>
						</view>
					</view>
				</view>
				<view class="padding margin-top flex flex-wrap " :class="isDark?'dark':'bg-white'">
					<button class="cu-btn round line" @click="refreshInfo()">
						<text class="cuIcon-refresh text-right" :class="isDark?'dark':''"></text></button>

				</view>


			</view>
		</view>
		<zmm-watermark>

		</zmm-watermark>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				array: [],
				index: 0,
				list: [], //显示
				totalList: [], //全部
				total: null,
				num: null,
				showEmptyIcon: false,
				isDark: this.isDark,
				bottom: {},
				collegeIndex: 0,
				majorIndex: 0,
				classNameIndex: 0,
				courseNameIndex: 0,
			}
		},
		onLoad() {


		},

		onShow() {
			let _this = this
			_this.refresh()
			_this.refreshInfo()

		},
		methods: {

			bindPickerChange: function(e) {
				let _this = this

				_this.collegeIndex = e.target.value[0]
				_this.majorIndex = e.target.value[1]
				_this.classNameIndex = e.target.value[2]
				_this.courseNameIndex = e.target.value[3]
				_this.refreshInfo()
			},

			/**
			 * @description  请求学期
			 */
			refresh: function() {
				let _this = this
				_this.$schoolApi.scoreSingleRankTypeList().then(response => {
					if (response.status == 0) {
						var list = []
						var arrayList = [
							[],
							[],
							[],
							[]
						]
						list = []
						for (var i = 0; i < response.data.college.length; i++) {
							list[i] = response.data.college[i]
						}
						arrayList[0] = list
						list = []
						for (var i = 0; i < response.data.major.length; i++) {
							list[i] = response.data.major[i]
						}
						arrayList[1] = list

						list = []
						for (var i = 0; i < response.data.className.length; i++) {
							list[i] = response.data.className[i]
						}
						arrayList[2] = list

						list = []
						for (var i = 0; i < response.data.courseName.length; i++) {
							list[i] = response.data.courseName[i]
						}
						arrayList[3] = list
						_this.array = arrayList
						//console.log(_this.array)
						if (_this.$store.state.scoreSingleRankType.college != undefined) {
							_this.array[0].unshift(_this.$store.state.scoreSingleRankType.college)
							_this.array[1].unshift(_this.$store.state.scoreSingleRankType.major)
							_this.array[2].unshift(_this.$store.state.scoreSingleRankType.className)
							_this.array[3].unshift(_this.$store.state.scoreSingleRankType.course)

						}

					}
					//这里只会在接口是成功状态返回
				})
			},
			/**
			 * @description  请求成绩+学期
			 */
			refreshInfo: function() {
				let _this = this
				let form = {}

				if (_this.array.length > 0) {
					form = {
						college: _this.array[0][_this.collegeIndex],
						major: _this.array[1][_this.majorIndex],
						className: _this.array[2][_this.classNameIndex],
						course: _this.array[3][_this.courseNameIndex]
					}
					_this.$store.commit("scoreSingleRankType", form)
				} else {
					form = {
						course: '请选择科目',
						college: "全选学院",
						major: "全选专业",
						className: "全选班级",
					}
				}
				if (_this.$store.state.scoreSingleRankType.course == undefined) {
					form = {
						course: '请选择科目',
						college: "全选学院",
						major: "全选专业",
						className: "全选班级",
					}
				} else {
					form = _this.$store.state.scoreSingleRankType
				}
				_this.$schoolApi.scoreSingleRankList(form).then(response => {
					if (response.status == 0) {
						uni.showToast({
							icon: 'none',
							title: '成功获取数据',
							duration: 2000
						});
						var tempList = []
						if (response.data.length == 1) {
							var temp = {
								"username": "找不到您",
								"gradePoint": "0",
								"score": "0"
							}
							_this.bottom = []
							_this.bottom = temp
							response.data[0].username = '当前选择数据空'
							tempList[0] = response.data[0]
							_this.list = tempList

						} else {
							_this.list = []
							for (var i = 0; i < response.data.length - 1; i++) {
								_this.list.push(response.data[i])
							}
							_this.bottom = response.data[response.data.length - 1]

						}
					} else if (response.status != 608 && response.status != 603) {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false,
							success: function(res) {
								if (res.confirm) {

								} else if (res.cancel) {

								}
							}
						});
					}
				})

			}




		}

	}
</script>

<style>
	.smallButton {
		width: 400rpx;
		background-color: #428bca;
		border-color: #357ebd;
		color: #fff;
		-moz-border-radius: 10rpx;
		-webkit-border-radius: 10rpx;
		border-radius: 10rpx;
		/* future proofing */
		-khtml-border-radius: 10rpx;
		/* for old Konqueror browsers */
		text-align: center;
		border: 1rpx solid transparent;
		margin: 0 rpx auto;
		font-size: 37rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		margin: 30rpx;
	}
</style>
